<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>mixin</title>
    <script src='./vue.global.js'></script>
</head>
<body>
    <div id='app'></div>

    <script>

        /* 通过mixin提取可复用的选项（data methods computed watch 生命周期...） */
        const myMixin = {
            data(){
                return {
                    nationality:"天朝",
                    province:"广东",

                    // data中的内容与引用我的组件冲突时 以组件内的数据为准
                    message:"hello",
                }
            },

            // methods:{},
            // computed:{},

            /* 组件创建实例完毕时回调的生命周期：生命周期直接合并到组件的生命周期中 */
            created(){
                console.log("mixin的created被加载了");
            }
        }

        const app = Vue.createApp({
            // 从外界注入mixin共享/复用的数据
            mixins:[myMixin],

            data(){
                return {
                    message:"goodbye",
                    foo:"abc"
                }
            },
            methods:{},
            computed:{},

            /* 组件创建实例完毕时回调的生命周期 */
            created(){
                console.log("根组件实例创建完毕");
                console.log(this.$data);
            }

        })

        app.mount('#app')
    </script>
</body>
</html>